<template>
  <div class="left-top">
    <div class="headers1">
      <div class="headers_left">
        <span>系统快捷入口</span>
      </div>
      <div class="headers_right" @click="openEditDialog">自定义编辑 ></div>
    </div>
    <div class="content">
    
          <div class="content_box">
            <div class="content_top" v-for="(item, index) in shortCuts" :key="index"  @click="openDetail(item)">
              <div class="content_top_img">
                <img :src="portalPath+ '/r/'+item.appIconUrl.slice(1)" alt="" class="icon" />
              </div>
              <el-badge v-if="item.extMark && item.extMark !== '0'" :value="item.extMark" class="badge"></el-badge>
              <div class="content_title">{{ item.appName }}</div>
            </div>
          </div>
 
    </div>
    <el-dialog
      title="编辑入口"
      :visible.sync="editDialogVisible"
      @close="closeEditDialog"
    >
      <div class="edit-content">
        <div class="content-box">
          <div
            class="content-item"
            v-for="(entry, index) in entries"
            :key="index"
          >
            <div class="content-top-img">
              <img :src="portalPath+ '/r/'+entry.appIconUrl.slice(1)" alt="" class="icon" />
            </div>
            <div class="content-title">{{ entry.appName }}</div>
            <div class="content-bottom">
              <i
                v-if="entry.type !== 'system'"
                class="el-icon-remove"
               @click.stop="deleteEntry(entry, index)"
              ></i>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openAddDialog">新增</el-button>
          <el-button @click="editDialogVisible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="新增入口"
      :visible.sync="addDialogVisible"
      @close="closeAddDialog"
    >
      <el-form
        :model="newEntry"
        ref="addEntryForm"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="入口名称" prop="name">
          <el-input v-model="newEntry.name"></el-input>
        </el-form-item>

        <el-form-item label="入口图片" prop="image">
          <el-upload
            class="upload-demo"
            drag
            :action="uploadUrl"
            :on-success="handleImageUpload"
            :show-file-list="false"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              拖拽文件到此处，或<em>点击上传</em>
            </div>
          </el-upload>
          <img
            v-if="newEntry.image"
            :src=" portalPath+ '/r/'+newEntry.image.slice(1)"
            class="uploaded-image"
          />
        </el-form-item>

        <el-form-item label="入口链接" prop="link">
          <el-input v-model="newEntry.link"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAddDialog">取 消</el-button>
        <el-button type="primary" @click="submitNewEntry">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
import { getNavbar } from "@/api/index";
export default {
  name: "LeftTop",
  data() {
    return {
      portalPath:window.portalPath,
      baseUploadUrl: '/portal/api/bonoFile/attachment/upfile', // 基础上传 URL
      boId: "",
      shortCuts: [],
      editDialogVisible: false,
      addDialogVisible: false,
      entries: [],
      newEntry: {
        name: "",
        image: "",
        link: "",
      },
      formRules: {
        name: [{ required: true, message: "请输入入口名称", trigger: "blur" }],
        image: [
          { required: true, message: "请上传入口图片", trigger: "change" },
        ],
        link: [{ required: true, message: "请输入入口链接", trigger: "blur" }],
      },
    };
  },
  computed: {
    uploadUrl() {
      return `${portalPath}/api/bonoFile/attachment/upfile/${window.sid}`; // 计算属性，构建上传 URL
    },
  },
  mounted() {
    this.getlist();
  },
  methods: {
    openDetail(item) {
      window.open(item.appUrl);
    },
    //查询
    getlist() {
      var param = {
        sid: window.sid,
        cmd: "com.bono.portal.userfunction",
      };
      getNavbar(param).then((res) => {

        const { result, msg, data, id } = res;
        this.shortCuts = res.data.shortCuts;
        this.entries = this.shortCuts;
      });
    },
    openEditDialog() {
      this.entries = this.shortCuts;
      this.editDialogVisible = true;
    },
    closeEditDialog() {
      this.editDialogVisible = false;
    },
    openAddDialog() {
      this.newEntry = { name: "", image: "", link: "" }; // 重置输入框
      this.addDialogVisible = true;
    },
    closeAddDialog() {
      this.addDialogVisible = false;
    },
    handleImageUpload(response, file) {
      this.newEntry.image = response.data.imgPath; // 根据实际接口返回的 URL 设置
 
      this.boId = response.data.boId;
    },
    submitNewEntry() {
     
      this.$refs.addEntryForm.validate((valid) => {
        if (valid) {
          // 提交逻辑
          var param = {
            sid: window.sid,
            cmd: "com.bono.portal.addFunction",
            boId:this.boId,
            appName:this.newEntry.name,
            appUrl:this.newEntry.link,
          };
          getNavbar(param).then((res) => {
        
            const { result, msg, data, id } = res;
            if(res.result == "ok"){
              this.$message.success("添加成功");
              this.getlist();
              this.addDialogVisible = false;
            }
        
          });
        } else {
      
          return false;
        }
      });
    },
    deleteEntry(entry, index) {
      this.$confirm("此操作将删除该应用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 执行删除操作
          var param = {
            sid: window.sid,
            cmd: "com.bono.portal.deleteFunction",
            id: entry.id,
          };
          getNavbar(param).then((res) => {
       
            if (res.result == "ok") {
              this.$message.success("删除成功");
              this.getlist();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>



<style scoped>
.badge{
  position: absolute;
  right: 16px;
  top: 1px;
}
.dialog-footer {
  text-align: right;

  margin-top: 60px;
}
.content-bottom {
  position: absolute;
  right: 30px;
  top: 9px;
}
.content-bottom i {
  color: red;
  cursor: pointer;
}
.content-item {
  position: relative; /* 使 delete-icon 相对于这个项定位 */
  flex: 0 0 18%;
  margin-bottom: 16px;
  text-align: center;
}
.delete-icon {
  position: absolute;
  top: 5px; /* 调整图标距离顶部的距离 */
  right: 5px; /* 调整图标距离右边的距离 */
  color: red; /* 设置图标颜色为红色 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
}
.content-box {
  display: flex;
  flex-wrap: wrap;

}

.content_top {
  margin-bottom: 16px;
  position: relative; /* 为删除按钮提供位置 */
  text-align: center;
  cursor: pointer;
}

.delete-button {
  position: absolute;
  top: 0;
  right: 0;
}
.uploaded-image {
  max-width: 100%;
  max-height: 100px; /* 限制上传图片的大小 */
}

.content_top {
  flex:  0 0 33%;
  margin-bottom: 16px;
  position: relative; /* 为删除按钮提供位置 */
}

.delete-button {
  position: absolute;
  top: 0;
  right: 0;
}
.uploaded-image {
  max-width: 100%;
  max-height: 100px; /* 限制上传图片的大小 */
}

.content_box {
  display: flex;

  flex-wrap: wrap;
 
 
}
.content::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 隐藏滚动条 - 适用于 Firefox */
.content {
  scrollbar-width: none; /* 隐藏滚动条 */
}
.hovered .titles {
  color: #1e4398; /* 鼠标悬停时标题颜色 */
  cursor: pointer;
}

.new-icon {
  margin-left: 4px; /* 新图标与标题之间的间距 */
  width: 36px;
  height: 18px;
}

.date {
  margin-left: auto; /* 日期靠右对齐 */
  font-size: 12px; /* 日期字体大小 */
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}
.left-top {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0px 2px 6px 0px rgba(139, 157, 175, 0.1);
  height: 100%;
  border-radius: 10px;
  margin-left: 10px;
  padding: 0 20px 0 20px;

}

.headers1 {
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;

}
.headers1 .headers_left span {
  font-family: "PingFang SC", sans-serif;
  font-weight: bold;
  font-size: 18px;
  color: #323333;
}
.headers_right {
  display: flex;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1e4398;
  cursor: pointer;
}

.carous_img {
  width: 100%;
  height: 100%;
}

.headers1 span {
  border-left: 4px solid #1e4398;
  padding-left: 9px;
}

.content {
  margin-top: 27px;
  height: 400px;
  overflow-y: auto;
 
}
.content_title {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-top: 15px;
}
.icon {
  width: 60px;
  height: 60px;
  border-radius: 20px;
}
.content-top-img{
  width: 60px;
  height: 60px;
  border-radius: 20px;
  margin: auto;
}
.content_top_img{
  width: 60px;
  height: 60px;
  margin: auto;
  border-radius: 20px;
}

.content_left {
  padding-right: 10px; /* 左侧内容与右侧内容之间的间距 */
  flex: 0 0 40%;
}
.content_center {
  flex: 0 0 1%;
}

.content_right {
  display: flex;
  flex-direction: column; /* 列表垂直排列 */
}
.content_right {
  flex: 1;
}

.content_right ul {
  list-style-type: none; /* 去掉列表项的默认样式 */
  padding: 0; /* 去掉内边距 */
  margin: 0; /* 去掉外边距 */
}

.content_right li {
  line-height: 30px;
}
.bottom {
  font-family: PingFang SC;
  font-weight: 700;
  font-size: 14px;
  color: #1e4398;
  text-align: right;
  cursor: pointer;
  margin-top: 10px;
}
.el-carousel {
  height: 100% !important;
}
</style>